//第二条轨迹x起始位置
let w = 50;
let hs = 200;
let h = 0;
let wi = 1;
let p = 0;
//这里添加一个变量
let i = 0;
let l = [];
let x2 = 0;
let y2 = 0;
let x3 = 0;
let y3 = 0;
let p3 = 0;
let r3 = 0;
let ook;
let obk;
function setup() {
    createCanvas(windowWidth, windowHeight);
    background(40, 188, 213);
    frameRate(30);
    //在这里把所有画图的方法都加入进去，注意传入的是函数体 pic0 ,不是 pic0()
    l.push(pic0, pic1, pic2);
    ook = new Ok();
    obk = new Ok2();
}

function draw() {
    background(40, 188, 213);
    if (x2 < 10 || x2 > 600) x2 = 10;
    x2 += 1;
    y2 = 40 * sin(0.033 * x2) + 200;
    // debugTrack(x2,y2);

    push();
    translate(x2, y2);
    // 绘静态图
    fill(100, 165, 0);
    ellipse(0, 0, 50, 50);
    // 是否旋转坐标轴
    // 是否继续添加轨迹
    //      if (r3<0 || r3>2*PI ) r3=0;
    //     r3+=0.1*PI;
    //      x3=2*cos(r3)+1;
    //      y3=5*sin(r3)+3;
    if (x3 < 10 || x3 > 200) x3 = 10;
    x3 += 1;
    y3 = 10 * sin(0.033 * x3) + 10;
    // let k =new Ok(x3,y3);
    // k.run();
    ook.run(x3,y3)
    obk.run(x3+10,y3+10)
    // ok.run(x3,y3);
    // debugTrack(x3,y3);
    // push();
    // translate(x3, y3);
    // p3 += (1 * PI / 30) * 1;
    // rotate(p3);
    // fill(100, 0, 0);
    // ellipse(0, 0, 20, 50);
    // pop();

    pop();
    // let g =new Ok(x2+20,y3+20);
    // g.run();

    // 主要质点１(w,h)
    // 质点运动轨迹wh
    if (w > 500) w=50;
    w+=wi;
    h=20*sin(0.033*w)+hs;
    //质点作为原点展开一个坐标系内开质点1.1 w1,h1

    push();
    translate(w,h);
    //1s转一圈
    // p+=2*PI/frameRate()*wi;
    //2s转一圈
    p+=(1*PI/30)*wi;
    rotate(p);
    try{
        l[i](0,0);
    }catch (e) {
        i=0;
        l[i]();
    }
    pop();
//     m = m + mSpeed;
//     n= n+ nSpeed;
//     if (n > 100||n<50){
//         nSpeed = nSpeed*-1;
//     }
// //movement on X axis for balloon
//     if(m>400){
//         m=-75;
//     }
}

//这个函数是p5他认识的一个函数，就就这个名字，改不了，鼠标点击后会发生
//如果你只切换两个图，如下　用boolean 就可以，需要切换n个图，就需要用int了，最好是借助list的index去安排
function mouseClicked() {
    i++;
    // if (i<l.length-1) {
    //     i++;
    // }else {
    //     i=0
    // }
}

function pic0(m, n) {

    fill(255, 0, 0);
    ellipse(m, n, 60, 60);
    line(m - 25, n + 30, m - 15, n + 60);
    line(m + 25, n + 30, m + 15, n + 60);
    fill(255, 193, 66);
    rect(m - 30, n + 60, 60, 30);
}

function pic1(m, n) {

    fill(255, 165, 0);
    ellipse(m, n, 90, 70);
    line(m - 25, n + 30, m - 15, n + 60);
    line(m + 25, n + 30, m + 15, n + 60);
    fill(255, 193, 193);
    rect(m - 30, n + 60, 60, 30);
}

function pic2(m, n) {
    fill(100, 165, 0);
    ellipse(m, n, 90, 70);
    line(m - 25, n + 30, m - 15, n + 60);
    line(m + 25, n + 30, m + 15, n + 60);
    fill(255, 193, 193);
    rect(m - 30, n + 60, 60, 30);
}

function debugTrack(x, y) {
    fill(255, 10, 0);
    ellipse(x, y, 10, 10);
}

class Ok {
    constructor(){
        this.p4=0;

    }
// var Ok={
//
//     p4:0,

    run(x,y){

        push();
        translate(x, y);

        this.p4 += ( Math.PI / 30);
        // print(this.p4);
        rotate(this.p4);

        fill(100, 0, 0);
        ellipse(0, 0, 20, 50);

        pop();
    }

}
class Ok2 {
    constructor(){
        this.p4=0;
        this.x5=0;
        this.y5=0;
        this.ok1=new Ok();

    }
// var Ok={
//
//     p4:0,

    run(x,y){

        push();
        translate(x, y);

        this.p4 += ( Math.PI / 30);
        // print(this.p4);
        rotate(this.p4);

        fill(100, 0, 0);
        ellipse(0, 0, 20, 50);

        if (this.x5 < 10 || this.x5 > 200) this.x5 = 10;
        this.x5 += 1;
        this.y5 = 10 * sin(0.033 * this.x5) + 20;
        this.ok1.run(this.x5,this.y5);
        pop();
    }

}